@charset "utf-8";
@import "./reset.scss";
@import "./common.scss";


#app{
    overflow: hidden;
    width: 375px;
    height: 500px;
    margin: 100px auto;
    margin-left: 100px;
    background-color: #fff;
    border: 1px solid rgb(164, 165, 162);
    border-radius: 10px;
    //阴影设置  水平距离 垂直距离 阴影虚化程度 阴影大小 颜色 内阴影
    box-shadow: 1px 2px 4px 1px rgb(111, 108, 108) ;
    >.head{
        width: 375px;
        height: 50px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        >h1{
            margin-left: 10px;
        }
        >.iconfont{
            margin-right: 10px;
        }
        
    }
    >.todos {
        position: relative;
        overflow: hidden;
        width: 375px;
        height: 400px;
        background-color: #f5f5f5;
    
        >li{
            //overflow: hidden;
            position: relative;
            margin-top: 14px;
            margin-left: 40px;
            list-style-type:circle;
            background-color: #fff;
            width: 300px;
            height: 40px;
            line-height: 40px;
            border-radius: 6px;
            &:nth-child(1){
                margin-top: 30px;
            }

            >.btn_01{
                overflow: hidden;
               position: absolute;
               right: 20px;
               top: 50%;
               transform: translateY(-50%);
               border-radius: 20px;
               border-color: #f5f5f5;
               background-color: #f5f5f5;
            }
          
        }
        >.blank {
            width: 200px;
            //height: 60px;
            background-color: #fff;
            opacity: .3;
            position:absolute;
            top:50%;
            left:50%;
            transform: translateX(-50%) translateY(-50%);

        }
       
    }
    >.foot {
        overflow: hidden;
        width: 375px;
        height: 50px;
        background-color: #fff;
        display: flex;
        >.inp{
            overflow: hidden;
            width: 315px;
            height: 60px;
            //background-color: green;

            >.in {
                width: 300px;
                height: 30px;
                border: none;
                margin-top: 10px;
                margin-left: 2px;
                border-radius: 24px;
                background-color: #f5f5f5;
                
            }
        }
       >.btns {
        width: 60px;
       // background-color: blue;
            >button{
                //
                //border:;
                background-color: none;
                margin-top: 15px;
                //margin-left: 0px;
                border-radius: 20px;
                background-color: #f5f5f5;
                border-color: #f5f5f5;
            }
       }
        
    }
}